<template>
  <form-dialog :visible="visible" :title="title" @handleClose="handleClose">
    <!-- 设置共享弹窗 -->
    <template #content v-if="title === $t('workspace.SettingsWorkspac')">
      <el-form style="padding-top: 20px" :model="Form" v-loading="loading">
        <el-form-item :label="$t('workspace.WorkspacUser')">
          <el-input placeholder="请输入租户名" v-model="Form.SettingsWorkspac" clearable> </el-input>
          <span class="form-explain">{{ $t('workspace.BindWorkspacUser') }}</span>
        </el-form-item>
      </el-form>
    </template>
    <!-- 取消共享弹窗 -->
    <template #content v-else>
      <div style="padding-top: 20px">
        <el-form ref="form" label-position="right" v-loading="loading">
          <el-form-item
            class="cancel-workspac-user-item"
            :label="$t('workspace.CancelWorkspacUser')"
            prop="hw_ids"
            name="hw_ids"
          >
            <el-select
              v-model="FormDateName"
              @change="CancelSelect"
              collapse-tags
              multiple
              remote
              :remote-method="remoteMethod"
              filterable
              reserve-keyword
            >
              <el-optipn style="display: flex; justify-content: space-between">
                <el-button type="text" style="padding-left: 20px" @click="CheckChange">{{
                  checked ? '取消全选' : '全选'
                }}</el-button>
                <el-checkbox v-model="checked" @change="CheckChange" style="padding-right: 20px"></el-checkbox>
              </el-optipn>
              <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="SettingsConfirm" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialog from '../../../components/Dialog/formDialog.vue'
export default Vue.extend({
  components: { FormDialog },
  data() {
    return {
      visible: false,
      loading: false,
      title: '',
      SettingsFrom: [],
      Form: {
        SettingsWorkspac: ''
      },
      SettingsUuid: '',
      options: [],
      list: [],
      FormDateName: [],
      checked: true
    }
  },
  methods: {
    init(type: any, rem: any) {
      if (type === 'SettingsWorkspac') {
        this.SettingsUuid = rem.uuid
        ;(this as any).title = this.$t('workspace.SettingsWorkspac')
        this.visible = true
      }
      if (type === 'CancelWorkspac') {
        ;(this as any).title = this.$t('workspace.CancelWorkspac')
        ;(this as any).visible = true
        this.SettingsUuid = rem.uuid
        this.loading = true
        if (!this.checked) {
          this.checked = true
        }
        ;(this as any).$pandaApi
          .apiGetworkareas({ cloud_tenant_uuid: rem.owneruuid, cloud_workarea_uuid: rem.uuid })
          .then((res: any) => {
            ;(this as any).FormDateName = [...res]
            this.list = res.map((item: any) => {
              return { label: item, value: item }
            })
            this.options = this.list
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
    remoteMethod(query: any) {
      if (query !== '') {
        this.options = this.list.filter((item: any) => {
          return item.value.toLowerCase().indexOf(query.toLowerCase()) > -1
        })
      } else {
        this.options = [...this.list]
      }
    },
    handleClose() {
      this.visible = false
      this.Form.SettingsWorkspac = ''
      this.FormDateName = []
    },
    settingsConfirm() {
      if (this.title === this.$t('workspace.SettingsWorkspac')) {
        ;(this as any).SettingsFrom = this.Form.SettingsWorkspac.split(',')
        if (this.SettingsFrom.length > 50) {
          this.$message.error('输入租户数量不可超过50个')
          return
        }

        this.loading = true
        ;(this as any).$pandaApi
          .apiPostSettingsWorkspac({ id: this.SettingsUuid, name: this.SettingsFrom })
          .then((res: any) => {
            if (res.code !== 2000) return this.$message.error(res.message)
            this.$message.success((this as any).$t('workspace.SuccessSettingsWorkspac'))
            this.visible = false

            this.Form.SettingsWorkspac = ''
            this.$emit('updata')
          })
          .catch((err: any) => {
            this.$message.error('设置共享区操作失败')
          })
          .finally(() => {
            this.loading = false
          })
      }
      if (this.title === this.$t('workspace.CancelWorkspac')) {
        if (this.FormDateName.length === 0) {
          this.$message.error('租户列表不能为空。')
        } else {
          this.loading = true
          ;(this as any).$pandaApi
            .apiDelSettingsWorkspac({ id: this.SettingsUuid, name: this.FormDateName })
            .then((res: any) => {
              this.$message.success((this as any).$t('workspace.SuccessCancelWorkspac'))
              this.$emit('updata')
            })
            .catch(async (error: any) => {
              if (error.code == 4001 && error.data) {
                const errorData = error.data

                if (errorData.shared_bandwidth_error && errorData.shared_bandwidth_error.length > 0) {
                  this.$message.error('取消共享失败：此工作区下有未退订的带宽。')
                  return
                }

                if (errorData.delete_desktop_error) {
                  for (let i = 0; i < errorData.delete_desktop_error.length; i++) {
                    const item = errorData.delete_desktop_error[i]
                    // 避免$message弹框重叠
                    await this.$message.error(`取消共享失败：租户${item.tenant_name}下有未退订的桌面。`)
                  }
                }

                this.$emit('updata')
              }
            })
            .finally(() => {
              this.FormDateName = []
              this.loading = false
              this.visible = false
            })
        }
      }
    },
    checkChange() {
      if (this.checked) {
        ;(this as any).FormDateName = this.options.map((item: any) => {
          return item.value
        })
      } else {
        this.FormDateName = []
      }
    },
    cancelSelect() {
      if (this.FormDateName.length === this.options.length) {
        this.checked = true
      }
      if (this.FormDateName.length < this.options.length) {
        this.checked = false
      }
    }
  }
})
</script>
<style lang="scss" scoped>
.form-explain {
  width: 100%;
  color: #f00;
  font-size: 12px;
  position: absolute;
  top: -24px;
  left: 0px;
}
.cancel-workspac-user-item {
  ::v-deep .el-form-item__label {
    width: 6rem;
    line-height: 2;
  }

  ::v-deep .el-input {
    height: unset;
  }
}
</style>
